Nützliche String-Methoden

Nachdem wir uns nun die Grundlagen von Strings angesehen haben, lassen Sie uns einen Gang höher schalten und darüber nachdenken, welche nützlichen Operationen wir mit eingebauten Methoden auf Strings ausführen können, wie zum Beispiel das Finden der Länge eines Textstrings, das Verbinden und Teilen von Strings, das Ersetzen eines Zeichens in einem String durch ein anderes und mehr.

Voraussetzungen: Ein Verständnis von HTML und den Grundlagen von CSS. Kenntnisse der String-Grundlagen.
Lernziele: String-Manipulation mit gängigen Eigenschaften und Methoden, die in JavaScript eingebaut sind.

Strings als Objekte

Die meisten Werte können in JavaScript so verwendet werden, als wären sie Objekte. Wenn Sie zum Beispiel einen String erstellen, indem Sie

js
const string = "This is my string";

verwenden, ist die Variable selbst zwar kein Objekt, sie hat jedoch aufgrund der Nutzbarkeit als Objekt beim Zugriff auf Eigenschaften eine große Anzahl von Eigenschaften und Methoden zur Verfügung. Das können Sie sehen, wenn Sie die String Objektseite aufrufen und die Liste an der Seite der Seite anschauen!

Jetzt, bevor Ihr Gehirn anfängt zu schmelzen, keine Sorge! Sie müssen wirklich nicht über die meisten von ihnen Bescheid wissen, wenn Sie gerade erst mit Ihrem Lernweg beginnen. Aber es gibt einige, die Sie möglicherweise ziemlich oft verwenden werden, und auf die werden wir hier eingehen.

Lassen Sie uns einige Beispiele in die Entwickler-Konsole des Browsers eingeben.

Die Länge eines Strings ermitteln

Das ist einfach — Sie verwenden die length Eigenschaft. Versuchen Sie, die folgenden Zeilen einzugeben:

js
const browserType = "mozilla";
browserType.length;

Das sollte die Zahl 7 zurückgeben, da "mozilla" 7 Zeichen lang ist. Dies ist aus vielen Gründen nützlich; zum Beispiel möchten Sie vielleicht die Längen einer Reihe von Namen herausfinden, um sie der Länge nach anzuzeigen, oder einem Benutzer mitteilen, dass ein von ihm in ein Formularfeld eingegebener Benutzername zu lang ist, wenn er eine bestimmte Länge überschreitet.

Ein bestimmtes String-Zeichen abrufen

In einem verwandten Zusammenhang können Sie mit der eckigen Klammer-Notation ein beliebiges Zeichen innerhalb eines Strings zurückgeben — das bedeutet, dass Sie eckige Klammern ([]) am Ende Ihres Variablennamens hinzufügen. Innerhalb der eckigen Klammern geben Sie die Nummer des Zeichens an, das Sie zurückgeben möchten, also zum Beispiel, um den ersten Buchstaben abzurufen, würden Sie das so machen:

js
browserType[0];

Denken Sie daran: Computer zählen ab 0, nicht 1!

Um das letzte Zeichen eines beliebigen Strings abzurufen, könnten wir die folgende Zeile verwenden, indem wir diese Technik mit der length Eigenschaft, die wir oben betrachtet habe, kombinieren:

js
browserType[browserType.length - 1];

Die Länge des Strings "mozilla" ist 7, aber da das Zählen bei 0 beginnt, ist die Position des letzten Zeichens 6; mit length-1 erhalten wir das letzte Zeichen.

Testen, ob ein String ein Substring enthält

Manchmal möchten Sie herausfinden, ob ein kleinerer String innerhalb eines größeren enthalten ist (wir sagen generell, ob ein Substring innerhalb eines Strings vorhanden ist). Das kann mit der includes() Methode gemacht werden, die einen einzigen Parameter nimmt — den Substring, nach dem Sie suchen möchten.

Es gibt true zurück, wenn der String den Substring enthält, und false andernfalls.

js
const browserType = "mozilla";

if (browserType.includes("zilla")) {
  console.log("Found zilla!");
} else {
  console.log("No zilla here!");
}

Häufig möchten Sie wissen, ob ein String mit einem bestimmten Substring beginnt oder endet. Dies ist ein häufiges Bedürfnis, weswegen es zwei spezielle Methoden dafür gibt: startsWith() und endsWith():

js
const browserType = "mozilla";

if (browserType.startsWith("zilla")) {
  console.log("Found zilla!");
} else {
  console.log("No zilla here!");
}
js
const browserType = "mozilla";

if (browserType.endsWith("zilla")) {
  console.log("Found zilla!");
} else {
  console.log("No zilla here!");
}

Die Position eines Substrings in einem String finden

Sie können die Position eines Substrings innerhalb eines größeren Strings mit der indexOf() Methode finden. Diese Methode nimmt zwei Parameter – den Substring, nach dem Sie suchen möchten, und einen optionalen Parameter, der den Startpunkt der Suche festlegt.

Wenn der String den Substring enthält, gibt indexOf() den Index des ersten Vorkommens des Substrings zurück. Wenn der String den Substring nicht enthält, gibt indexOf() -1 zurück.

js
const tagline = "MDN - Resources for developers, by developers";
console.log(tagline.indexOf("developers")); // 20

Beginnend bei 0, wenn Sie die Anzahl der Zeichen (einschließlich des Leerzeichens) vom Anfang des Strings an zählen, ist das erste Vorkommen des Substrings "developers" am Index 20.

js
console.log(tagline.indexOf("x")); // -1

Dies hingegen gibt -1 zurück, weil das Zeichen x im String nicht vorhanden ist.

Wenn Sie nun wissen, wie man das erste Vorkommen eines Substrings findet, wie finden Sie weitere Vorkommen? Das können Sie tun, indem Sie als zweiten Parameter der Methode einen Wert übergeben, der größer ist als der Index des vorherigen Vorkommens.

js
const firstOccurrence = tagline.indexOf("developers");
const secondOccurrence = tagline.indexOf("developers", firstOccurrence + 1);

console.log(firstOccurrence); // 20
console.log(secondOccurrence); // 35

Hier sagen wir der Methode, dass sie nach dem Substring "developers" ab Index 21 (firstOccurrence + 1) suchen soll, und sie gibt den Index 35 zurück.

Einen Substring aus einem String extrahieren

Sie können einen Substring aus einem String mit der slice() Methode extrahieren. Sie übergeben ihr:

  • den Index, an dem das Extrahieren beginnen soll
  • den Index, an dem das Extrahieren enden soll. Dieser ist exklusiv, was bedeutet, dass das Zeichen an diesem Index nicht in den extrahierten Substring einbezogen wird.

Zum Beispiel:

js
const browserType = "mozilla";
console.log(browserType.slice(1, 4)); // "ozi"

Das Zeichen an Index 1 ist "o", und das Zeichen an Index 4 ist "l". Also extrahieren wir alle Zeichen ab "o" und enden direkt vor "l", was uns "ozi" gibt.

Wenn Sie wissen, dass Sie alle verbleibenden Zeichen in einem String nach einem bestimmten Zeichen extrahieren möchten, müssen Sie den zweiten Parameter nicht einfügen. Stattdessen müssen Sie nur die Zeichenposition angeben, ab der Sie die verbleibenden Zeichen in einem String extrahieren möchten. Versuchen Sie das Folgende:

js
browserType.slice(2); // "zilla"

Dies gibt "zilla" zurück — das liegt daran, dass die Zeichenposition 2 der Buchstabe "z" ist, und da Sie keinen zweiten Parameter angegeben haben, wurden alle verbleibenden Zeichen im String als Substring zurückgegeben.

Hinweis: slice() hat auch andere Optionen; studieren Sie die slice() Seite, um zu sehen, was Sie sonst noch finden können.

Ändern der Groß-/Kleinschreibung

Die String-Methoden toLowerCase() und toUpperCase() nehmen einen String und konvertieren alle Zeichen in Klein- oder Großbuchstaben, jeweils. Dies kann nützlich sein, wenn Sie beispielsweise alle benutzereingegebenen Daten normalisieren möchten, bevor Sie sie in einer Datenbank speichern.

Versuchen Sie, die folgenden Zeilen einzugeben, um zu sehen, was passiert:

js
const radData = "My NaMe Is MuD";
console.log(radData.toLowerCase());
console.log(radData.toUpperCase());

Aktualisieren von Teilen eines Strings

Sie können einen Substring innerhalb eines Strings durch einen anderen Substring mit der replace() Methode ersetzen.

In diesem Beispiel geben wir zwei Parameter an — den String, den wir ersetzen möchten, und den String, durch den wir ihn ersetzen möchten:

js
const browserType = "mozilla";
const updated = browserType.replace("moz", "van");

console.log(updated); // "vanilla"
console.log(browserType); // "mozilla"

Beachten Sie, dass replace(), wie viele String-Methoden, den String, auf dem es aufgerufen wurde, nicht ändert, sondern einen neuen String zurückgibt. Wenn Sie die ursprüngliche browserType Variable aktualisieren möchten, müssten Sie etwas wie das Folgende tun:

js
let browserType = "mozilla";
browserType = browserType.replace("moz", "van");

console.log(browserType); // "vanilla"

Außerdem beachten Sie, dass wir nun browserType mit let erklären müssen und nicht mit const, weil wir es neu zuweisen.

Seien Sie sich bewusst, dass replace() in dieser Form nur das erste Vorkommen des Substrings ändert. Wenn Sie alle Vorkommen ändern möchten, können Sie replaceAll() verwenden:

js
let quote = "To be or not to be";
quote = quote.replaceAll("be", "code");

console.log(quote); // "To code or not to code"

Aktive Lernbeispiele

In diesem Abschnitt werden Sie aufgefordert, selbst etwas Code zur String-Manipulation zu schreiben. In jeder der untenstehenden Übungen haben wir ein Array von Strings und eine Schleife, die jeden Wert im Array verarbeitet und in einer Aufzählungsliste anzeigt. Sie müssen jetzt noch keine Arrays oder Schleifen verstehen — diese werden in zukünftigen Artikeln erklärt. Alles, was Sie in jedem Fall tun müssen, ist, den Code zu schreiben, der die Strings im gewünschten Format ausgibt.

Jedes Beispiel kommt mit einem "Zurücksetzen"-Button, den Sie verwenden können, um den Code zurückzusetzen, wenn Sie einen Fehler gemacht haben und ihn nicht wieder zum Laufen bringen können, und einem "Lösung anzeigen"-Button, den Sie drücken können, um eine mögliche Antwort zu sehen, wenn Sie wirklich feststecken.

Grußnachrichten filtern

In der ersten Übung beginnen wir einfach — wir haben ein Array von Grußkarten-Nachrichten, aber wir möchten sie sortieren, um nur die Weihnachtsnachrichten aufzulisten. Wir möchten, dass Sie einen Bedingungstest innerhalb der if () Struktur ausfüllen, um jeden String zu testen und ihn nur in der Liste auszugeben, wenn es sich um eine Weihnachtsnachricht handelt.

Überlegen Sie, wie Sie testen könnten, ob die Nachricht in jedem Fall eine Weihnachtsnachricht ist. Welcher String ist in all diesen Nachrichten vorhanden und welche Methode könnten Sie verwenden, um zu testen, ob er vorhanden ist?

Großschreibung korrigieren

In dieser Übung haben wir die Namen von Städten im Vereinigten Königreich, aber die Großschreibung ist total durcheinander. Wir möchten, dass Sie sie so ändern, dass sie alle kleingeschrieben sind, bis auf einen Großbuchstaben am Anfang. Eine gute Methode, dies zu tun, ist:

  1. Wandeln Sie den gesamten String in der city Variablen in Kleinbuchstaben um und speichern Sie ihn in einer neuen Variablen.
  2. Nehmen Sie den ersten Buchstaben des Strings in dieser neuen Variablen und speichern Sie ihn in einer anderen Variablen.
  3. Ersetzen Sie mit dieser letzten Variablen als Substring den ersten Buchstaben des Kleinbuchstaben-Strings durch den ersten Buchstaben des Kleinbuchstaben-Strings in Großbuchstaben umgewandelt. Speichern Sie das Ergebnis dieser Ersetzungsverfahren in einer weiteren neuen Variablen.
  4. Ändern Sie den Wert der result Variablen so, dass er dem endgültigen Ergebnis entspricht, nicht der city.

Hinweis: Ein Hinweis — die Parameter der String-Methoden müssen keine String-Literale sein; sie können auch Variablen oder sogar Variablen mit einer darauf angewendeten Methode sein.

Neue Strings aus alten Teilen machen

In dieser letzten Übung enthält das Array eine Reihe von Strings mit Informationen über Bahnhöfe im Norden Englands. Die Strings sind Datenelemente, die den dreistelligen Stationscode enthalten, gefolgt von einigen maschinenlesbaren Daten, gefolgt von einem Semikolon und dem menschenlesbaren Stationsnamen. Zum Beispiel:

MAN675847583748sjt567654;Manchester Piccadilly

Wir möchten den Stationscode und den Namen extrahieren und sie in einer Zeichenkette mit der folgenden Struktur zusammenfügen:

MAN: Manchester Piccadilly

Wir würden empfehlen, es so zu machen:

  1. Extrahieren Sie den dreistelligen Stationscode und speichern Sie ihn in einer neuen Variablen.
  2. Finden Sie die Zeichenindexnummer des Semikolons.
  3. Extrahieren Sie den menschenlesbaren Stationsnamen mit der Zeichenindexnummer des Semikolons als Bezugspunkt und speichern Sie ihn in einer neuen Variablen.
  4. Konkatenieren Sie die beiden neuen Variablen und ein String-Literal, um die endgültige Zeichenkette zu erstellen.
  5. Ändern Sie den Wert der result Variablen so, dass er der endgültigen Zeichenkette entspricht, nicht der station.

Testen Sie Ihre Fähigkeiten!

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich die wichtigsten Informationen merken? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihre Fähigkeiten: Strings.

Fazit

Sie können nicht leugnen, dass die Fähigkeit, mit Wörtern und Sätzen in der Programmierung umzugehen, sehr wichtig ist — besonders in JavaScript, da es bei Websites darum geht, mit Menschen zu kommunizieren. Dieser Artikel hat Ihnen die Grundlagen vermittelt, die Sie über die Manipulation von Strings im Moment wissen müssen. Dies sollte Ihnen gut dienen, wenn Sie sich in komplexere Themen vertiefen. Als nächstes werden wir uns mit der letzten großen Art von Daten beschäftigen, auf die wir uns kurzfristig konzentrieren müssen — Arrays.